import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Button, Icon, Pagination  } from 'antd'
import styles from './index.less'
import classnames from 'classnames'
import { AnimTableBody } from '../../components'
import { DropOption } from '../../components'
const confirm = Modal.confirm



class list extends React.Component {
  state ={
      listid:0
  }
  componentWillReceiveProps(nextProps){
    this.setState({
      listid:nextProps.detail.id
    })
  }
  render() {
    const {
       pagination,dataSource,query,onDetail,onEdit,orderStatus
    } =this.props
    const detail = (e)=>{
      if(localStorage.getItem("editorder") == 'true'){
        onDetail(e)
      }else{
        confirm({
          title: '温馨提示',
          content: '你修改的的内容还没保存，确认退出会清空你修改的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editorder",'true')
            onDetail(e)
          },
        });
      }
    }
    const onShowSizeChange = (e,i) =>{
      const data = {
        pageSize:JSON.stringify(i),
        page: JSON.stringify(e),
        orderStatus:orderStatus
      }
      query(data)
    }
    const stylelist =(e) =>{
      return e== this.state.listid ?styles.listxuan:styles.list
    }
    const orderStatusType =(e)=>{
        let text = ''
        switch(e){
            case 0:
                text = '代接单'
                break;
            case 1:
                text = '代发货'
                break;
            case 2:
                text = '发货中'
                break;
            case 5:
                text = '已发货'
                break;
            case 8:
                text = '已评价'
                break; 
            case 10:
                text = '已作废'
                break;            
        }
        return text
    }
    const handleMenuClick = (item, e) => {
      if(localStorage.getItem("editorder") == 'true'){
        if (e.key === '1') {
          if(item.orderStatus == 0 || item.orderStatus == 10){
            localStorage.setItem("editorder",'true')
            onEdit(item)
          }else{
            Modal.warning({
              title: '温馨提示',
              content: '此订单暂时不能修改订单状态！',
            });
          }
        }
      }else{
        confirm({
          title: '温馨提示',
          content: '你填写的内容还没保存，确认退出会清空你填写的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editorder",'true')
            handleMenuClick(item,e)
          },
        });
      }
    }
    return (
      <div>
        <div className={styles.listboxs}>
          {dataSource.map((item,listid ) =>
              <div className={stylelist(item.id)} key={listid} onClick={e =>detail(item)} >
                <div className={styles.listCenter} style={{paddingBottom:6}}>
                  <div className={styles.listTit}>{item.orderSerial }</div>
                  
                </div>
                <div className={styles.listCenter}>
                  <div  className={styles.fontnum}><span style={{fontSize:12}}>货物数：</span>{item.goodsCount }
                    <div><span className={styles.fontcz}>{orderStatusType(item.orderStatus) }</span></div>
                  </div>
                  {/*<div><span className={styles.fontBtn} onClick={e => Edit(item)}>编辑</span></div>*/}
                  {/*<div><Button className={styles.editBtn} onClick={(e) => Edit(item)}>修改状态</Button></div>*/}
                  <div><DropOption onMenuClick={e => handleMenuClick(item, e)} menuOptions={[{ key: '1', name: '修改状态' }]} /></div>
                </div>
              </div>
            )}
        </div>
        <div className={styles.Pagination}>
          <Pagination defaultCurrent={pagination.current} simple total={pagination.total} onChange={onShowSizeChange} />
        </div>
      </div>
    );
  }
}


export default list
